<template>
  <div>
    <el-form ref="myForm" :inline="true"  label-width="100px" :rules="rule" :model="formInline" class="demo-form-inline" style="margin: 28px">
      <el-form-item label="标题:" prop="title">
        <el-input size="small" v-model="formInline.title"
                  :disabled="'see'===editType"
                  placeholder="请输入标题" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="栏目:">
        <el-input disabled size="small" v-model="formInline.colName"
                  placeholder="请输入栏目" style="width: 245px"></el-input>
      </el-form-item>
      <el-form-item label="类别:">
        <el-select clearable size="small" v-model="formInline.category"
                   :disabled="'see'===editType||isThirdNode"
                    placeholder="请选择类别" style="width: 245px" @change='getInfo'>
          <el-option v-for="item in category" :label="item.colName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级审核员:" prop="auditFirstId">
        <el-select clearable  size="small" v-model="formInline.auditFirstId"
                   :disabled="'see'===editType"
                    placeholder="请选择一级审核员" style="width: 245px">
          <el-option :label="item.name" :value="item.id" v-if="listPer1.includes(item.id)"
                     v-for="item in personList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级审核员:" prop="auditSecondId">
        <el-select clearable size="small" v-model="formInline.auditSecondId"
                   :disabled="'see'===editType"
                    placeholder="请选择二级审核员" style="width: 245px">
          <el-option :label="item.name" :value="item.id" v-if="listPer2.includes(item.id)"
                     v-for="item in personList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期:" prop="startTime">
        <el-date-picker
            clearable
            :disabled="'see'===editType"
            style="width: 600px"
            @change="timeChange"
            v-model="timeL"
            size="small"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="门户选择:" prop="portalSelect">
        <el-input style="width: 245px" disabled value="对内"></el-input>
<!--        <el-checkbox-group v-model="formInline.portalSelect_"
                           style="width: 245px"
                           :disabled="'see'===editType">
          <el-checkbox v-for="item in cities" :label="item.value" :key="item.value">{{item.key}}</el-checkbox>
        </el-checkbox-group>-->
      </el-form-item>
      <el-form-item label="是否置顶:" prop="top">
        <el-radio-group v-model="formInline.top" size="small"
                        style="width: 245px" :disabled="'see'===editType">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="内容:" prop="content">
        <div id="edit" style="width: 600px;height: 380px" ref="edit"></div>
<!--        <div v-show="'see'===editType" v-html="formInline.content" style="width: 600px"></div>-->
      </el-form-item>
      <el-form-item label="缩略图:" prop="">
        <Upload v-if="'see'!==editType" ref="uploadS" :files="files"></Upload>
        <img v-else :src="formInline.pic" class="avatar" style="width: 148px;height: 148px">
      </el-form-item>
      <el-form-item label="标签:" v-if="false">
        <el-select multiple size="small" v-model="formInline.tag_"
                   placeholder="请选择标签" style="width: 245px" :disabled="'see'===editType">
          <el-option v-for="city in perList" :label="city" :value="city"></el-option>
        </el-select>
        <el-checkbox-group v-model="formInline.tag_" size="medium" style="width: 600px" :disabled="'see'===editType">
          <el-checkbox-button style="margin-right: 10px" v-for="(city,index) in perList" v-show="index<5 || more"
                              :label="city" :key="city">{{city}}</el-checkbox-button>
        </el-checkbox-group>
        <el-button class="bt" size="small" type="primary" plain @click="more=!more">{{!more?'更多':'收起'}}</el-button>
      </el-form-item>
      <el-form-item v-if="undefined!==formInline.id">
        <div class="ims">
          <div class="li"></div>
          <div>流程记录</div>
        </div>
        <el-table
            style="margin-top: 20px;width: 600px;margin-left: 100px"
            :data="tableData"
            :header-cell-style="{background:'#F8F9FA'}"
            class="margin20">
          <el-table-column
              prop="node"
              label="流程节点">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="处理人">
          </el-table-column>
          <el-table-column
              prop="view"
              label="处理意见"
              width="180">
          </el-table-column>
          <el-table-column
              prop="res"
              label="处理结果">
          </el-table-column>
          <el-table-column
              prop="time"
              label="处理时间"
              width="180">
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="80%">
        <detail ref="detail"></detail>
      </el-dialog>
      <div style="width: 100%;display: flex;flex-direction: row-reverse;">
        <el-button  type="info"  size="small" style="margin-left: 10px;
        margin-right: 33px" plain @click="preTab">预览</el-button>
        <el-button  type="info"  size="small" style="margin-left: 10px;
        margin-right: 33px" plain @click="closeTab" v-if="'see'!==editType">取消</el-button>
        <el-button  size="small" type="primary" @click="onSubmit" v-if="'see'!==editType">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
import wangEditor from 'wangeditor'
import uploadImg from "@/components/uploadImg";
import Upload from "@/components/uploadImg";
import detail from "@/views/news/detail";
export default {
  components: {Upload,detail},
  props:{
    dataUp:{},
    type:'',
    dataType:'',
    editType:''
  },
  watch:{
    dialogVisible(n,o){
      if(n){
        this.$nextTick(res=>{
          let per=JSON.parse(JSON.stringify(this.formInline))
          //per.id=0
          per.content=this.myEdit.txt.html()
          console.log(per)
          this.$refs.detail.article=per
          this.$refs.detail.show=false
          console.log(this.$refs.detail.show)
        })
      }
    },
    listPer1(){
      console.log('eee')
      this.$set(this.formInline,'auditFirstId','')
    },
    listPer2(){
      console.log('ppp')
      this.$set(this.formInline,'auditSecondId','')
    },
    dataType:{
      immediate:true,
      handler(){
        console.log(666)
        console.log(this.dataType)
        this.getTable()
        //this.$forceUpdate()
      },

      //this.$set(this.formInline,'',this.dataUp)
    },
    dataUp:{
      immediate:true,
      handler(){
        //console.log(this.dataType)
        this.formInline=JSON.parse(JSON.stringify(this.dataUp))
        /*if(null!==this.formInline.content){
          this.myEdit.txt.html(this.formInline.content)
        }*/
        if(this.formInline.isThirdNode){
          this.isThirdNode=true
        }
        console.log(88888)
        console.log(this.formInline)
        console.log(this.formInline.col)
        this.$api.getUserForReviewer().then(res=>{
          this.personList=res.data
        }).catch()
        let par={columnId:this.formInline.col}
        this.files=[{url:this.formInline.pic}]
        /*if(undefined!==this.formInline.category){
          par={
            columnId:this.formInline.category
          }
        }else{
          par={
            columnId:this.formInline.col
          }
        }*/
        try {
          this.$api.getColumnInfoTreeById(par).then(res=>{
            if('7'===res.data.parentId){
              this.category=res.data.subLanMu
            }else{
              this.category=[]
            }
            if(null!==res.data.firstReviewer){
              this.listPer1=res.data.firstReviewer
            }else{
              this.listPer1=[]
            }
            if(null!==res.data.secondReviewer){
              this.listPer2=res.data.secondReviewer
            }else{
              this.listPer2=[]
            }
          }).catch()
        }catch (e) {
          console.log(e)
        }

        if(undefined!==this.formInline.id){
          this.$api.getContentLogs({
            contentId:this.formInline.id
          }).then(res=>{
              this.tableData=res.data
          }).catch()
          this.timeL=[this.formInline.startTime,this.formInline.endTime]
        }else{
          this.timeL=['','']

        }
        this.getTable()
        //this.$forceUpdate()
      },
      //this.$set(this.formInline,'',this.dataUp)
    }
  },
  data() {
    return {
      myEdit:'',
      timeL:'',
      dialogVisible:false,
      personList:[],
      listPer1:[],
      listPer2:[],
      category:[],
      files:[],
      isThirdNode:false,
      list1:[{id:1,name:'111'},{id:2,name:'921321'}],
      list2:[{id:1,name:'111'},{id:2,name:'921321'}],
      more:false,
      formInline:{title:'',portalSelect_:['1'],portalSelect:'1',startTime: '',},
      rule: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        /*auditSecondId: [
          { required: true, message: '请选择二级审核员', trigger: 'change' }
        ],*/
        startTime:[
            { required: true, message: '请选择日期', trigger: 'change' },
        ],
        auditFirstId: [
          { required: true, message: '请选择一级审核员', trigger: 'blur' }
          /*{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }*/
        ],
        portalSelect: [
          { required: true, message: '请选择门户', trigger: 'blur' }
        ],
        top: [
          { required: true, message: '请选择是否置顶', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
      },
      checkAll: false,
      checkedCities: [],
      cities: [{key: '对内',value:'1'}, {key: '对外',value:'2'},],
      perList:['666' ],
      isIndeterminate: true,
      tableData:[],
    };
  },
  name: "searchForm",
  mounted() {
    this.init()
  },
  methods: {
    preTab(){
      this.dialogVisible=true
    },
    closeTab(){
      this.$emit('closeTab')
    },
    getInfo(col){
      console.log(col)
      /*this.formInline.auditFirstId=''
      this.formInline.auditSecondId=''*/
      this.listPer1=[]
      this.listPer2=[]
      if(''===col){
        col=this.formInline.col
      }
      this.$api.getColumnInfoTreeById({
        columnId:col
      }).then(res=>{
        if(null!==res.data.firstReviewer){
          this.listPer1=res.data.firstReviewer
        }
        if(null!==res.data.secondReviewer){
          this.listPer2=res.data.secondReviewer
        }
        //this.$forceUpdate()
      }).catch()
    },
    timeChange(e){
      if(null===e){
        this.formInline.startTime=''
        this.formInline.endTime=''
      }else{
        this.formInline.startTime=moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        this.formInline.endTime=moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
      }

    },
    init(){

        let edit = document.getElementById('edit');
        this.myEdit = new wangEditor(edit);
        this.myEdit.config.pasteFilterStyle = false
        //this.editor.config.uploadImgShowBase64=true
        this.myEdit.config.zIndex = 1
        this.myEdit.config.uploadImgServer = 'http://222.186.144.74:60195/api/admin/myUploadSingle'
        this.myEdit.config.uploadFileName = 'file'
        this.myEdit.config.uploadImgHeaders = {
          'Authorization': sessionStorage.getItem('token'),
        }
        this.myEdit.config.uploadImgHooks = {
          /*success: function(xhr) {
          console.log('success', xhr)
        },*/
          customInsert: function (insertImgFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result)
            console.log(result.data.url)
            insertImgFn(result.data.url)
          }
        }
        this.myEdit.create();
        this.getTable()

    },
    getTable(){
      /*console.log(898989)
      console.log('ssss')
      console.log(this.formInline)*/
      this.$nextTick(res=>{
        try {
          if(undefined!==this.formInline.content){
            this.myEdit.txt.html(this.formInline.content)
          }else{
            console.log(this.myEdit)
            this.myEdit.txt.clear()
          }
        }catch (e) {
          console.log(e)
        }
      })
      //this.$api.contentPaginQuery().then().catch()
    },
    handleCheckedCitiesChange(val){
      console.log(val)
      this.$forceUpdate()
    },
    subType(){
      if(undefined!==this.formInline.id){
        this.$api.contentEdit(this.formInline).then(res=>{
          if(200===res.code){
            this.$message.success('修改成功！')
            this.closeTab()
          }else{
            this.$message.error('修改失败！')
          }
        }).catch()
      }else{
        this.$api.contentAdd(this.formInline).then(res=>{
          if(200===res.code){
            this.$message.success('新增成功！')
            this.closeTab()
          }else{
            this.$message.error('修改失败！')
          }
        }).catch()
      }
    },
    onSubmit() {
      console.log('submit!');
      this.formInline.content=this.myEdit.txt.html()
      //this.formInline.portalSelect=this.formInline.portalSelect_.join(',')
      this.formInline.auditFirst=this.formInline.auditFirstId
      this.formInline.auditSecond= this.formInline.auditSecondId
      this.formInline.portalSelect='1'
      /*delete this.formInline.auditSecondId
      delete this.formInline.auditFirstId*/
      console.log(this.formInline)
      this.formInline.pic=this.$refs.uploadS.file[0].url
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.subType()
          //alert('submit!');
        } else {
          this.$message.error('请输入必填项！')
          //console.log('error submit!!');
          //return
        }
      });
      //return

    }
  }
}
</script>

<style scoped lang="less">
.bt{
  background: transparent;
  border: transparent;
}
.ims{
  //width: 55px;
  height: 14px;
  font-size: 14px;
  font-family: PingFang SC,serif;
  font-weight: 500;
  color: #1890FF;
  width: 600px;
  line-height: 24px;
  display: flex;
  .li{
    width: 2px;
    margin-top: 6px;
    height: 12px;
    background: #1890FF;
    border-radius: 1px;
    margin-right: 10px;
  }
  //border-radius: 1px;
}
/deep/ .el-checkbox-button__inner {
  border-left: 1px solid #DCDFE6;
  border-radius: 4px!important;
}
</style>
